<template>
  <div style="width: 377px;">
    <!-- 轮播图 -->
    <div style="position: relative;" v-if="node.componentModel.name=='banner'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterBanner :nodeModel="node" :id="index"></placeCenterBanner>
    </div>
    <!-- 九宫格 -->
    <div style="position: relative;" v-if="node.componentModel.name=='grid'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterGrid :nodeModel="node" :id="index"></placeCenterGrid>
    </div>
    <!-- 轮播通知 -->
    <div style="position: relative;" v-if="node.componentModel.name=='noticebar'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterNoticebar :nodeModel="node" :id="index"></placeCenterNoticebar>
    </div>
    <!-- 富文本 -->
    <div style="position: relative;" v-if="node.componentModel.name=='richtext'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterRichtext :nodeModel="node" :id="index"></placeCenterRichtext>
    </div>
    <!-- 商品九宫格 -->
    <div style="position: relative;" v-if="node.componentModel.name=='itemGrid'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemGrid :nodeModel="node" :id="index"></placeCenterItemGrid>
    </div>
    <!-- 商品列表 -->
    <div style="position: relative;" v-if="node.componentModel.name=='itemList'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemList :nodeModel="node" :id="index"></placeCenterItemList>
    </div>
    <!-- 分享页 -->
    <div style="position: relative;" v-if="node.componentModel.name=='share'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterShare :nodeModel="node" :id="index"></placeCenterShare>
    </div>
    <!-- 商品基础信息 -->
    <div style="position: relative;" v-if="node.componentModel.name=='item-baseinfo'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemBaseinfo :nodeModel="node" :itemDetail="itemDetail" :id="index"></placeCenterItemBaseinfo>
    </div>
    <!-- 商品详情 -->
    <div style="position: relative;" v-if="node.componentModel.name=='item-detail'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemDetail :nodeModel="node" :itemDetail="itemDetail" :id="index"></placeCenterItemDetail>
    </div>
    <!-- 商品分类 -->
    <div style="position: relative;" v-if="node.componentModel.name=='itemCate'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemCate :nodeModel="node" :id="index"></placeCenterItemCate>
    </div>
    <!-- 自定义区域 -->
    <div style="position: relative;" v-if="node.componentModel.name=='custom'" @click="clickComponent(index)" @mouseleave="itemMouseleave(index)" @mouseenter="itemMouseenter(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterCustom :nodeModel="node" :id="index"></placeCenterCustom>
    </div>
  </div>
</template>
  
  <script>
    import {count} from '@/utils/count.js'
    import placeCenterBanner from '@/views/page/composing/placeCenter/place-center-banner'
    import placeCenterGrid from '@/views/page/composing/placeCenter/place-center-grid'
    import placeCenterNoticebar from '@/views/page/composing/placeCenter/place-center-noticebar'
    import placeCenterRichtext from '@/views/page/composing/placeCenter/place-center-richtext'
    import placeCenterItemGrid from '@/views/page/composing/placeCenter/place-center-itemGrid'
    import placeCenterItemList from '@/views/page/composing/placeCenter/place-center-itemList'
    import placeCenterShare from '@/views/page/composing/placeCenter/place-center-share'
    import placeCenterItemBaseinfo from '@/views/page/composing/placeCenter/place-center-item-baseinfo'
    import placeCenterItemDetail from '@/views/page/composing/placeCenter/place-center-item-detail'
    import placeCenterItemCate from '@/views/page/composing/placeCenter/place-center-itemCate'
    import placeCenterCustom from '@/views/page/composing/placeCenter/place-center-custom'
  let lastIndex = -1
  export default {
    components: {
      placeCenterBanner,
      placeCenterGrid,
      placeCenterNoticebar,
      placeCenterRichtext,
      placeCenterItemGrid,
      placeCenterItemList,
      placeCenterShare,
      placeCenterItemBaseinfo,
      placeCenterItemDetail,
      placeCenterItemCate,
      placeCenterCustom
    },
    props:{
        node:{
            type: Object,
            default: res=>{}
        },
        index:{
            type: [Number, String],
            default: ''
        },
        currentTarget: {
          type: [Number, String],
          default: ''
        },
        itemDetail: {
          type: Object,
          default: {}
        }
    },
    data() {
      return {
        userModel: {}
      }
    },
    created() {
      this.userModel = this.$store.getters.userModel
    },
    watch: {
      currentTarget: {
        immediate : true,
        handler(val){
          // console.log('监听currentTarget', val, this.index)
          if(val == -1){
            this.clickComponent(0)
          }else{
            this.clickComponent(val)
          }
        }
      },
    },
    methods:{
      
      clickComponent(e){
        // console.log('触发组件点击事件', e)
        if(lastIndex > -1 && document.getElementById(lastIndex)){
          // 回复上一次选中的样式
          document.getElementById(lastIndex).style.border = ''
          document.getElementById('close'+ String(lastIndex)).style.zIndex = -1
        }
        // 设置当前选中的样式
        if (document.getElementById(e)){
          document.getElementById(e).style.border = '1px solid #00e000'
          document.getElementById('close'+ String(e)).style.zIndex = 88
        }
        
        lastIndex = e
        this.$emit('selectComponent', e)
      },
      removeComponent(e){
        this.$emit('removeComponent', e)
      },
      itemMouseenter(e){
        document.getElementById(e).style.border = '1px solid #3575fc'
      },
      itemMouseleave(e){
        document.getElementById(e).style.border = ''
        if(lastIndex == e){
          document.getElementById(e).style.border = '1px solid #00e000'
        }
      }
    }
  }
  </script>
  
<style lang="scss" scoped>
  /* 限制单行,自动省略多余部分 */
  .limitLineNumOfOne{
    word-break:break-all;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
</style>
  